<template>
  <view class="container">
    <view class="header">
      <text class="title">现金流水详情</text>
    </view>
    
    <view class="detail-container" v-if="record">
      <view class="detail-card">
        <view class="detail-item">
          <text class="label">流水ID:</text>
          <text class="value">{{ record.flow_id }}</text>
        </view>
        
        <view class="detail-item">
          <text class="label">类型:</text>
          <text class="value" :class="getFlowTypeClass(record.flow_type)">
            {{ getFlowTypeLabel(record.flow_type) }}
          </text>
        </view>
        
        <view class="detail-item">
          <text class="label">金额:</text>
          <text class="value" :class="getAmountClass(record.amount)">
            {{ formatAmount(record.amount) }}
          </text>
        </view>
        
        <view class="detail-item">
          <text class="label">渠道:</text>
          <text class="value">{{ record.channel }}</text>
        </view>
        
        <view class="detail-item">
          <text class="label">手续费:</text>
          <text class="value">{{ formatAmount(record.fee || 0) }}</text>
        </view>
        
        <view class="detail-item">
          <text class="label">时间:</text>
          <text class="value">{{ formatDate(record.created_at) }}</text>
        </view>
        
        <view class="detail-item" v-if="record.note">
          <text class="label">备注:</text>
          <text class="value note">{{ record.note }}</text>
        </view>
      </view>
      
      <view class="button-group">
        <button class="edit-button" @click="editRecord">编辑</button>
        <button class="back-button" @click="goBack">返回</button>
      </view>
    </view>
    
    <view class="loading" v-else>
      加载中...
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { get } from '../../utils/api';

const router = useRouter();
const route = useRoute();
const record = ref(null);

// 流水类型映射
const flowTypeMap = {
  'deposit': '存款',
  'withdraw': '取款',
  'fiat_in': '法币入金',
  'fiat_out': '法币出金'
};

// 获取流水类型标签
const getFlowTypeLabel = (type) => {
  return flowTypeMap[type] || type;
};

// 获取流水类型样式类
const getFlowTypeClass = (type) => {
  const classMap = {
    'deposit': 'type-deposit',
    'withdraw': 'type-withdraw',
    'fiat_in': 'type-fiat-in',
    'fiat_out': 'type-fiat-out'
  };
  return classMap[type] || '';
};

// 获取金额样式类
const getAmountClass = (amount) => {
  return amount >= 0 ? 'amount-positive' : 'amount-negative';
};

// 格式化金额
const formatAmount = (amount) => {
  return `¥${parseFloat(Math.abs(amount)).toFixed(2)}`;
};

// 格式化日期
const formatDate = (dateStr) => {
  if (!dateStr) return '';
  const date = new Date(dateStr);
  return date.toLocaleString('zh-CN');
};

// 获取记录详情
const fetchRecordDetail = async (flowId) => {
  try {
    const res = await get(`/api/cash-flow/${flowId}`);
    if (res.statusCode === 200 && res.data.success) {
      record.value = res.data.data;
    } else {
      uni.showToast({
        title: res.data?.error || '获取详情失败',
        icon: 'none'
      });
    }
  } catch (error) {
    console.error('获取记录详情失败:', error);
    uni.showToast({
      title: '网络错误，获取详情失败',
      icon: 'none'
    });
  }
};

// 编辑记录
const editRecord = () => {
  if (record.value) {
    router.push({
      path: '/pages/cashflow/add',
      query: {
        mode: 'edit',
        id: record.value.flow_id,
        flow_type: record.value.flow_type,
        amount: Math.abs(record.value.amount),
        channel: record.value.channel,
        fee: record.value.fee || '',
        note: record.value.note || ''
      }
    });
  }
};

// 返回上一页
const goBack = () => {
  router.back();
};

// 页面加载时获取详情
onMounted(() => {
  const flowId = route.query.id;
  if (flowId) {
    fetchRecordDetail(flowId);
  } else {
    uni.showToast({
      title: '缺少记录ID',
      icon: 'none',
      success: () => {
        setTimeout(() => {
          router.back();
        }, 1500);
      }
    });
  }
});
</script>

<style>
.container {
  padding: 12px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.header {
  text-align: center;
  margin-bottom: 20px;
}

.title {
  font-size: 20px;
  font-weight: bold;
  color: #333;
}

.detail-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.detail-card {
  background: #fff;
  padding: 16px;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.detail-item {
  display: flex;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f5f5f5;
}

.detail-item:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.label {
  font-size: 14px;
  color: #666;
  width: 70px;
  flex-shrink: 0;
}

.value {
  font-size: 14px;
  color: #333;
  flex: 1;
  text-align: right;
}

.type-deposit {
  color: #19be6b;
}

.type-withdraw {
  color: #ed4014;
}

.type-fiat-in {
  color: #2d8cf0;
}

.type-fiat-out {
  color: #ff9900;
}

.amount-positive {
  color: #19be6b;
  font-weight: 600;
}

.amount-negative {
  color: #ed4014;
  font-weight: 600;
}

.note {
  color: #999;
}

.button-group {
  display: flex;
  gap: 12px;
  padding: 0 16px;
}

.edit-button, .back-button {
  flex: 1;
  height: 44px;
  border-radius: 20px;
  font-size: 16px;
  font-weight: bold;
}

.edit-button {
  background-color: #1989fa;
  color: #fff;
  border: none;
}

.edit-button:active {
  background-color: #096dd9;
}

.back-button {
  background-color: #fff;
  color: #333;
  border: 1px solid #ddd;
}

.back-button:active {
  background-color: #f5f5f5;
}

.loading {
  text-align: center;
  padding: 50px 0;
  font-size: 14px;
  color: #666;
}
</style>